<template>
  <div
    class="view-box"
    :class="{ active: isMove, overflow: homeExample.pattern === '预览模式' }"
    :style="{
      width: getViewBoxWidth()
    }"
  >
    <template v-if="homeExample.pattern === '编辑模式'">
      <el-form :style="{ width: viewType === 'drag' ? '1480rem' : '' }">
        <vue-ruler-tool
          :is-scale-revise="true"
          :topSpacing="0"
          :leftSpacing="0"
          position="absolute"
          v-if="viewType === 'drag'"
          ref="rulerTool"
          :parent="true"
        >
          <draggable
            animation="300"
            group="site"
            class="row-container"
            :style="{ width: viewType === 'drag' ? '1440rem' : '' }"
            ghostClass="ghost"
            :disabled="true"
          >
            <drag-free-component :isMove.sync="isMove"></drag-free-component>
          </draggable>
        </vue-ruler-tool>
        <edit-component v-if="viewType === 'form'"></edit-component>
      </el-form>
    </template>
    <div class="mains iframe" v-if="homeExample.pattern === '预览模式'">
      <div class="header-tip">中化集团-头部占位</div>
      <div class="t-container main">
        <!-- <el-form style="position: relative"> -->
        <preview-component
          :params="componentsList"
          v-if="viewType === 'form'"
        ></preview-component>

        <template v-if="viewType === 'drag'">
          <drag-preview
            v-for="(item, index) in componentsList"
            :key="index"
            :params="item"
          ></drag-preview>
        </template>
        <!-- </el-form> -->
      </div>
    </div>
  </div>
</template>

<script>
import editComponent from '@/components/render/edit.vue';
import PreviewComponent from '@/components/render/preview.vue';
import dragFreeComponent from '@/components/render/dragFreeComponent.vue';
import DragPreview from '@/components/render/dragPreview.vue';
import VueRulerTool from 'vue-ruler-tool';
import draggable from 'vuedraggable';
import { mapGetters } from 'vuex';
export default {
  name: 'ViewBox',
  components: {
    editComponent,
    PreviewComponent,
    dragFreeComponent,
    VueRulerTool,
    DragPreview,
    draggable
  },
  inject: ['homeExample'],
  computed: {
    ...mapGetters(['componentsList', 'viewType'])
  },
  provide() {
    return {
      view: this
    };
  },
  data() {
    return {
      isMove: false
    };
  },
  methods: {
    getViewBoxWidth() {
      if (this.viewType === 'drag') {
        if (this.homeExample.pattern === '预览模式') {
          return '100%';
        } else {
          return '980rem';
        }
      } else {
        return '100%';
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.header-tip {
  padding: 0 2% 0 53rem;
  font-size: 15rem;
  line-height: 49rem;
}
.view-box {
  width: 1000rem;
  height: calc(100vh - 51rem);
  position: relative;
  margin: auto;
  overflow-x: scroll;
  &.overflow {
    overflow: hidden;
  }
  // overflow-x: scroll;
  &.active {
    background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px)
        0% 0% / 20rem 20rem,
      linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 20rem
        20rem;
  }
  .t-container {
    // padding: 0 2% 15rem;
    width: 96%;
    margin: auto;
    position: relative;
    height: calc(100vh - 120rem);
    margin-bottom: 15rem;
  }
  .border {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    li {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      border-right: 1px solid #ddd;
      list-style: none;
      position: relative;
      .num {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        width: 10px;
        transform: translateX(-50%);
      }
    }
  }
  // height: 100%;
  ::v-deep {
    .el-scrollbar {
      height: 100%;
    }
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
  .el-form {
    width: 100%;
    height: 100%;
    .draggable {
      width: 100%;
      height: 100%;
    }
  }
  ::v-deep {
    .el-row {
      border: 1px dashed #ddd;
      min-height: 100px;
      flex: 1;
      width: 100%;
    }
    .el-form-item__content {
      flex: 1;
    }
    .el-form-item {
      margin-bottom: 0;
    }
    .render-col {
      margin-bottom: 10px;
      position: relative;
      &:hover > .tools-div {
        visibility: visible;
        + .el-form-item {
          background-color: #f6f7ff;
        }
        + .el-row {
          border-color: #409eff;
        }
      }

      .tools-div {
        visibility: hidden;
        position: absolute;
        right: 3%;
        top: -15px;
        z-index: 11;
        &.vis {
          visibility: visible;
          + .el-row {
            border-color: #409eff;
          }
        }
        .el-button {
          padding: 3px;
          font-size: 12px;
        }
      }
    }
    .tag-item {
      display: flex;
      align-items: center;
      padding: 10px;
      cursor: move;
      .el-form-item__content {
        margin-left: 0 !important;
      }
      // &:hover {
      //   background-color: #f6f7ff;
      // }
      &.active {
        background-color: #f6f7ff;
      }
      .label {
        margin-right: 15px;
      }
      // display: table;
    }
  }
}
</style>